<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('刀具监测列表')" />
    <th:block th:include="include :: footer" />
</head>
    <style>
        /*刀具div主体模块*/
        .toolDivAll{
            width: 1000px;
            height: 345px;
        }
        /*刀具css样式*/
        .toolDiv{
            text-align: left;
            font-size: 7px;
            width: 160px;
            height: 165px;
            background-color: #00FF00;
            padding: 5px;
            float: left;
            margin: 2px 2px 2px 2px;
        }
        /*翻页div*/
        .toolPageDiv{
            text-align: right;
        }
    </style>

    <script src="/component/echarts/echarts.min.js"></script>

    <body class="pear-container">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="col-sm-12 search-collapse">
                    <form id="formId" method="get">
                        <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位置：</label>
                        <select name="toolSpace" style="width: 130px" >
                            <option value="">不限</option>
                            <option value="机房1">机房1</option>
                            <option value="机房2">机房2</option>
                            <option value="机房3">机房3</option>
                        </select>
                        <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型号：</label>
                        <select name="toolType"  style="width: 130px"  >
                            <option value="">所有</option>
                            <option value="型号1">型号1</option>
                            <option value="型号2">型号2</option>
                            <option value="型号3">型号3</option>
                        </select>
                        <label >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态：</label>
                        <select name="toolState" id="toolState" style="width: 130px" >
                            <option value="正常">正常</option>
                            <option value="调试">调试</option>
                            <option value="故障">故障</option>
                        </select>
                        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <input type="button" id="toolQuery" class="pear-btn pear-btn-md pear-btn-primary" value="查询" style="width: 75px" />
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!--翻页表单-->
        <form id="pageForm" method="get">
            <input id="limit" name="limit" type="text" style="display: none" value="12">
            <input id="page" name="page" type="text" style="display: none" value="0">
        </form>

        <!--刀具div展示模块-->
        <div id="toolDivAll" class="toolDivAll"></div>
        <div class="toolPageDiv">
            <input type="button" id="toolPrev" class="pear-btn pear-btn-md pear-btn-primary" value="上一页" style="width: 75px;" />
            <input type="text" id="pageNumText" class="pear-btn-md pear-btn-primary" value="0" readonly="readonly" style="width: 75px">
            <input type="button" id="toolNext" class="pear-btn pear-btn-md pear-btn-primary" value="下一页" style="width: 75px;"/>
        </div>
    </body>
<script>

    //进入页面就执行的方法
    window.onload=function () {
        creatToolDiv();

    }

    function creatToolDiv(){
        $.ajax({
            type:"get",
            url:"/system/tool/data",
            dataType:'json',
            data: $("#formId").serialize()+'&'+$("#pageForm").serialize(),
            success: function (result) {  //返回刀具合集
                var html="";
                    for(var i=0;i<result.data.length;i++){
                    html+="<div class='toolDiv' onclick='clickToolDiv(this);'>"+
                        "<img src="+result.data[i].toolPrc+"><br/>" +
                        "型号：<span style='color: #2D8CF0'>"+result.data[i].toolType+"</span>&nbsp&nbsp"+
                        "状态：<span style='color: #2D8CF0'>"+result.data[i].toolState+"</span></br>"+
                        "位置：<span style='color: #2D8CF0'>"+result.data[i].toolSpace+"</span></br>"+
                        "加工件数：<span style='color: #2D8CF0'>"+result.data[i].spare1+"</span></div>"+
                        "<span class='axisId' style='display: none'>"+result.data[i].toolId+"</span>"
                    }
                $("#toolDivAll").html(html);
            }
        })
    }

    //上一页
    $("#toolPrev").click(function () {
        var pageNum =$("#pageNumText").val();
        if (pageNum==1){
            layer.msg('当前已是第一页');
        }else {
            $("#page").val(parseInt(pageNum-1));
            $("#pageNumText").val(parseInt(pageNum-1));
            $.ajax({
                type:"get",
                url:"/system/tool/data",
                dataType:'json',
                data: $("#formId").serialize()+'&'+$("#pageForm").serialize(),
                success: function (result) {  //返回主轴合集
                    var html="";
                    for(var i=0;i<result.data.length;i++){
                        html+="<div class='toolDiv' onclick='clickToolDiv(this);'>"+
                            "<img src="+result.data[i].toolPrc+"><br/>" +
                            "型号：<span style='color: #2D8CF0'>"+result.data[i].toolType+"</span>&nbsp&nbsp"+
                            "状态：<span style='color: #2D8CF0'>"+result.data[i].toolState+"</span></br>"+
                            "位置：<span style='color: #2D8CF0'>"+result.data[i].toolSpace+"</span></br>"+
                            "加工件数：<span style='color: #2D8CF0'>"+result.data[i].spare1+"</span></div>"+
                            "<span class='axisId' style='display: none'>"+result.data[i].toolId+"</span>"
                    }
                    $("#toolDivAll").html(html);
                }
            })
        }
    })

    //下一页
    $("#toolNext").click(function () {
        queryStateCount();
        var pageNum =$("#pageNumText").val();
        var pageMax=Math.floor(parseInt(axisCount/12));
        if (pageNum>=pageMax){
            layer.msg('当前已是最后一页');
        }else {
            var html="";
            var pageNum2 = parseInt(pageNum)+parseInt(1);
            $("#pageNumText").val(pageNum2);
            $("#page").val(pageNum2);
            console.log("11111111"+$("#pageNumText").val());
            console.log("22222222"+$("#page").val());
            $.ajax({
                type:"get",
                url:"/system/tool/data",
                dataType:'json',
                data: $("#formId").serialize()+'&'+$("#pageForm").serialize(),
                success: function (result) {  //返回主轴合集
                    for(var i=0;i<result.data.length;i++){
                        html+="<div class='toolDiv' onclick='clickToolDiv(this);'>"+
                            "<img src="+result.data[i].toolPrc+"><br/>" +
                            "型号：<span style='color: #2D8CF0'>"+result.data[i].toolType+"</span>&nbsp&nbsp"+
                            "状态：<span style='color: #2D8CF0'>"+result.data[i].toolState+"</span></br>"+
                            "位置：<span style='color: #2D8CF0'>"+result.data[i].toolSpace+"</span></br>"+
                            "加工件数：<span style='color: #2D8CF0'>"+result.data[i].spare1+"</span></div>"+
                            "<span class='axisId' style='display: none'>"+result.data[i].toolId+"</span>"
                    }
                    $("#toolDivAll").html(html);
                }
            })
        }
    })

    function queryStateCount(){
        var toolState = $("#toolState").val();
        $.ajax({
            type:"get",
            url:"/system/tool/selectToolCountByState",
            dataType:'json',
            data:{toolState:toolState},
            success: function (result) {  //返回主轴合集
                console.log("result-----"+result);
            }
        })

    }

</script>


</html>